<template>
	<div>
		<!-- vue-quill 编辑器 -->
		<quill-editor class="ql-editor" v-model="content"  ref="quillEditor"  :options="editorOption"  @blur="onEditorBlur($event)"  @focus="onEditorFocus($event)" @change="onEditorChange($event)">
		</quill-editor>
		<!-- videoUploadTag 默认是 false  -->
		<div :visible.sync="videoUploadTag">
			<el-dialog
				width="50%"
				id="video_upload"
				style="margin-top: 1px"
				title="视频上传"
				:visible.sync="videoUploadTag"
				append-to-body>
				<el-tabs v-model="activeName"  value="0">
					<el-tab-pane label="添加视频链接" name="first">
						<el-input v-model="videoLink" placeholder="请输入视频链接" clearable></el-input>
						<el-button type="primary" size="small" style="margin: 20px 0px 0px 0px " @click="addVideoLink()">添加
						</el-button>
					</el-tab-pane>
					<el-tab-pane label="素材库" name="second">请期待</el-tab-pane>
				</el-tabs>
			</el-dialog>
		</div>
		<!-- 自定义上传文件 -->
		<el-upload
			action="#"
			class="vueQuillUploadImage"
			:show-file-list="false"
			:before-upload="beforeQuillUploadImage"
			:data="extraParameters"
			:http-request="uploadImage"
			:on-success="handleQuillUploadImageSuccess"
		/>
	</div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { uploadImage } from '@/api/common/upload'


const titleConfig = {
    'ql-bold':'加粗',
    'ql-color':'颜色',
    'ql-font':'字体',
    'ql-code':'插入代码',
    'ql-italic':'斜体',
    'ql-link':'添加链接',
    'ql-background':'背景颜色',
    'ql-size':'字体大小',
    'ql-strike':'删除线',
    'ql-script':'上标/下标',
    'ql-underline':'下划线',
    'ql-blockquote':'引用',
    'ql-header':'标题',
    'ql-indent':'缩进',
    'ql-list':'列表',
    'ql-align':'文本对齐',
    'ql-direction':'文本方向',
    'ql-code-block':'代码块',
    'ql-formula':'公式',
    'ql-image':'图片',
    'ql-video':'视频',
    'ql-clean':'清除字体样式',
    'ql-upload':'文件'
};
export default{
	props: {
		/* 编辑器的内容 */
		value: String,
		/* 图片大小 */
		maxSize: {
			type: Number,
			default: 4000 //kb
		},
		uploadType: String,
		acceptType:Array,
	},
	data(){
		return{
			extraParameters:{
				uploadType:this.uploadType
			},
			videoUploadTag: false, //后续版本追加素材库的时候可以使用
			videoLink:"",
			//富文本编辑器选项
			content: this.value,
			activeName:"first",
			editorOption:{
				placeholder: "请输入",
				theme: "snow", // or 'bubble' 
				modules: {
					toolbar: {
						container: [
							["bold", "italic", "underline", "strike"],       // 加粗 斜体 下划线 删除线
							["blockquote", "code-block"],                    // 引用  代码块
							[{ list: "ordered" }, { list: "bullet" }],       // 有序、无序列表
							[{ indent: "-1" }, { indent: "+1" }],            // 缩进
							[{ size: ["small", false, "large", "huge"] }],   // 字体大小
							[{ header: [1, 2, 3, 4, 5, 6, false] }],         // 标题:几级标题
							[{'color': []}],                                 //字体颜色
							[{'background': []}],                            // 字体背景颜色
							[{ align: [] }],                                 // 对齐方式
							["clean"],                                       // 清除文本格式
							["link", "image", "video","upload"]              // 链接、图片、视频、文件上传
						],
						//自定义处理器
						handlers: {
							//图片上传
							'image':((value) =>{
								if(value){
									document.querySelector('.vueQuillUploadImage input').click()
								}else{
									this.quill.format('image',false)
								}
							}),
						}
					}
				}
			}
		}
	},
	components:{
		quillEditor
	},
	watch:{
		value: function() {
			this.content = this.value;
		}
	},
	mounted () {
		this.addQuillTitle()
	},
	methods:{
		onEditorBlur() {
			//失去焦点事件
		},
		onEditorFocus() {
			//获得焦点事件
		},
		onEditorChange() {
			//内容改变事件
			this.$emit("input", this.content);
		},
		//编辑器内图片上传
		beforeQuillUploadImage(){
			
		},
		//图片上传成功后回显示
		handleQuillUploadImageSuccess(res){
			console.log('res',res)
			let quill = this.$refs.quillEditor.quill
			let length = quill.getSelection().index;
			quill.insertEmbed(length, 'image', res.data.responseData[0])
			quill.setSelection(length + 1)
		},
		//上传图片
		uploadImage(val){
			let formData = new FormData();
			formData.append('uploadType',this.extraParameters.uploadType)
			formData.append('files',val.file)
			uploadImage(formData).then(res =>{
				console.log(res)
				if(res.data.responseCode == '200'){
					val.onSuccess(res)
				}
			}).catch(e =>{
				console.log(e)
				this.$message.error(e.data.responseMessage)
			})
		},
		//为菜单栏添加中文标题
		addQuillTitle () {
			const oToolBar = document.querySelector('.ql-toolbar'),
			aButton = oToolBar.querySelectorAll('button'),
			aSelect =  oToolBar.querySelectorAll('select');
			aButton.forEach(function(item){
				if(item.className === 'ql-script'){
					item.value === 'sub' ? item.title = '下标': item.title = '上标';
				}else if(item.className === 'ql-indent'){
					item.value === '+1' ? item.title ='向右缩进': item.title ='向左缩进';
				}else{
					item.title = titleConfig[item.classList[0]];
				}
			});
			aSelect.forEach(function(item){
				item.parentNode.title = titleConfig[item.classList[0]];
			});
		},
	}
}	
</script>

<style>
.ql-editor{
	line-height: normal !important;
	min-height: 300px;
	padding: 0px 0px;
}	

#隐藏自定义上传
.vueQuillUploadImage{
    width: 0;
    height: 0;
    display: none;
}
	
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
  content: "宋体";
  font-family: "SimSun";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
  content: "黑体";
  font-family: "SimHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
  content: "微软雅黑";
  font-family: "Microsoft YaHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
  content: "楷体";
  font-family: "KaiTi";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
  content: "仿宋";
  font-family: "FangSong";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
  content: "Arial";
  font-family: "Arial";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
  content: "Times New Roman";
  font-family: "Times New Roman";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
  content: "sans-serif";
  font-family: "sans-serif";
}

.ql-font-SimSun {
  font-family: "SimSun";
}

.ql-font-SimHei {
  font-family: "SimHei";
}

.ql-font-Microsoft-YaHei {
  font-family: "Microsoft YaHei";
}

.ql-font-KaiTi {
  font-family: "KaiTi";
}

.ql-font-FangSong {
  font-family: "FangSong";
}

.ql-font-Arial {
  font-family: "Arial";
}

.ql-font-Times-New-Roman {
  font-family: "Times New Roman";
}

.ql-font-sans-serif {
  font-family: "sans-serif";
}
</style>
